<style>
.el-message__content{
  font-size: 14px;
}
</style>

<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="代码">
        <el-input v-model="searchFrom.tradeDate" placeholder="日期" :clearable="true" @change="searchStockList" />
      </el-form-item>
      <el-form-item label="days">
        <el-input v-model="searchFrom.days" placeholder="days" :clearable="true" @change="searchStockList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchStockList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column label="代码" width="200">
        <template scope="scope">
          <span @click="openChart(scope.row.ts_code)">{{ scope.row.ts_code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="buy" prop="total_buy_elg_vol"></el-table-column>
      <el-table-column label="sell" prop="total_sell_elg_vol"></el-table-column>
      <el-table-column label="jf" prop="buy_sell_jf"></el-table-column>
    </el-table>
    <div style="text-align: center;">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="图形"
      :visible.sync="dialogTableVisible"
      :modal="false"
      @opened="openChartLine"
      width="90%"
    >
      <div id="dialog-chart" style="width:100%;height: 600px;" />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import echarts from 'echarts'

export default {
  name: 'vol',
  data() {
    return {
      tableData: [],
      total: 0,
      dialogTableVisible: false,
      searchFrom: {
        page: 1,
        pageSize: 10,
        tradeDate:"2021-12-21",
        days:1,
      },
      chart: null,
      chartTsCode: ''
    }
  },
  computed: {

  },
  created() {
    this.stockList()
  },
  methods: {
    stockList() {
      axios.get('/tushare/elgVolList', {
        params: {
          page: this.searchFrom.page,
          pageSize: this.searchFrom.pageSize,
          tradeDate: this.searchFrom.tradeDate,
          days:this.searchFrom.days,
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.tableData = response.data.data
            this.total = response.data.count
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    searchStockList() {
      this.searchFrom.page = 1
      this.searchFrom.collect = 0
      this.stockList()
    },
    searcCollect(type) {
      this.searchFrom.page = 1
      this.searchFrom.collect = 1
      this.searchFrom.type = type
      this.stockList()
    },
    editDayJetton(index, row) {
      this.$set(row, 'edit', true)
    },
    changeDayJetton(index, row) {
      if (row.day_jetton == '' || row.day_jetton == undefined) {
        return
      }
      this.$set(row, 'edit', false)
      axios.post('/tushare/updateDayJetton', qs.stringify({
        tsCode: row.ts_code,
        dayJetton: row.day_jetton
      }))
        .then(function(response) {
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleCurrentChange(val) {
      this.searchFrom.page = val
      this.stockList()
    },
    collect(row, val, type) {
      axios.get('/tushare/collect', {
        params: {
          tsCode: row.ts_code,
          collect: val,
          type: type
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            if (type == 'collect') {
              this.$set(row, 'collect', val)
            }
            if (type == 'peakButton') {
              this.$set(row, 'peak_button', val)
            }
            if (type == 'peakCenter') {
              this.$set(row, 'peak_center', val)
            }
            if (type == 'peakStable') {
              this.$set(row, 'peak_stable', val)
            }
          }
        })
        .catch(function(error) {

        })
    },
    openChart(tsCode) {
      this.dialogTableVisible = true
      this.chartTsCode = tsCode
    },
    closeChart() {
      this.dialogTableVisible = false
    },
    openChartLine() {
      let that = this;
      axios.get('/tushare/getDaily', {
        params: {
          tsCode: this.chartTsCode
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            let chart = echarts.init(document.getElementById('dialog-chart'))
            chart.off('click')

            var option

            option = {
              tooltip: {
                trigger: 'axis',
                position: function(pt) {
                  return [pt[0], '10%']
                }
              },
              title: {
                left: 'center',
                text: 'Large Area Chart'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                max:function (value) {
                  return value.max;
                },
                min:function (value) {
                  return value.min;
                },
              },
              dataZoom: [
                {
                  type: 'inside',
                  start: 0,
                  end: 100
                },
                {
                  start: 0,
                  end: 100
                }
              ],
              series: [
                {
                  name: 'Close',
                  type: 'line',
                  sampling: 'lttb',
                  data: []
                }
              ]
            }

            const data = response.data.data
            for (var i in data) {
              option['series'][0]['data'].push(data[i]['close'])
              option['xAxis']['data'].push(data[i]['trade_date'])
            }
            chart.on('click', function(params) {
              axios.get('/tushare/elgVol', {
                params: {
                  tsCode: that.chartTsCode,
                  tradeDate:params.name,
                  limit:30,
                }
              }).then((response) => {
                  if(response.data.code == 0){
                    let buy = response.data.data.buy
                    let sell = response.data.data.sell
                    let jf = response.data.data.jf
                    let cf = response.data.data.cf

                    let buy_sm = response.data.data.buy_sm
                    let sell_sm = response.data.data.sell_sm
                    let jf_sm = response.data.data.jf_sm
                    let cf_sm = response.data.data.cf_sm

                    let buy_md = response.data.data.buy_md
                    let sell_md = response.data.data.sell_md
                    let jf_md = response.data.data.jf_md
                    let cf_md = response.data.data.cf_md

                    let html = "buy:"+buy+" sell:"+sell+" jf:"+jf+" cf:"+cf+"<br/><br/>";
                    html += "buySm:"+buy_sm+" sellSm:"+sell_sm+" jfSm:"+jf_sm+" cfSm:"+cf_sm+"<br/><br/>";
                    html += "buyMd:"+buy_md+" sellMd:"+sell_md+" jfMd:"+jf_md+" cfMd:"+cf_md+"<br/><br/>";
                    that.$message({
                      duration:0,
                      showClose: true,
                      message: html,
                      dangerouslyUseHTMLString:true,
                    });
                  }
              })

            });
            chart.setOption(option)
          }
        })
        .catch(function(error) {

        })
    }
  }
}
</script>
